<template>
  <div class="shop">
    <index-header title="店铺分类" :title1="shopDes.shop_name" title2="设计改变世界" :ifTitleClick="false" :handleChange="handleChange" titleBgColor="#32aefd" isShowTab  placeholder="输入您的宝贝的商品信息" :selectedDefault="selectedTab" :goodsTypes="tabs" :searchEvent="handleSearch">
      <template #other>
        <div class="shopInfo">
          <div
            v-if="login && $route.query.shop_id && userInfo.shop_id !== Number($route.query.shop_id)"
            :class="{'collect': true, 'collected': isCollect}" 
            @click="() => { isCollect ? handleMoveCollect() : handleCollect() }"
          >
            {{isCollect?'已收藏':'收藏该店铺'}}
          </div>
          <div
            v-if="userInfo.shop_id === Number($route.query.shop_id)"
            class="add" 
            @click="handleVisible({visible: true})"
          >
            +添加宝贝
          </div>
          <div class="shopGrade">
            <img src="../../../assets/grade.gif">
            <img src="../../../assets/grade.gif">
            <img src="../../../assets/grade.gif">
          </div>
          <div class="shopInco">
            <img src="../../../assets/icon1.png">
            <img src="../../../assets/icon2.png">
          </div>
          <div class="shopScore">
            <p>
              <span class="des">【</span>
              描述
              <span :style="{color: shopDes.description >= 4? 'red':'rgb(50, 173, 56)'}">
                {{Number(shopDes.description).toFixed(1)}}
              </span>
              <span class="desDV">|</span>
              服务
              <span :style="{color: shopDes.service >= 4? 'red':'rgb(50, 173, 56)'}">
                {{Number(shopDes.service).toFixed(1)}}
              </span>
              <span class="des">】</span>
            </p>
          </div>
          <div>
            <i class="el-icon-arrow-down"></i>
          </div>
        </div>
      </template>
    </index-header>
    <div class="main">
      <div :style="{width: '78%'}">
        <!-- 别人的店 -->
        <div v-if="$route.query.shop_id && $route.query.shop_id !== userInfo.shop_id">
          <!-- 判断当前是否有shop_id 没有的话就是不是店主 另外一个是用于搜索的 -->
          <div class="main-left" v-if="!showSearch && $route.query.shop_id">
            <!-- 普通的展示 -->
            <template v-for="(value,keys) in goodsDatas">
                <ShowContain :title="typesMap[keys]" :key="keys" :moreClick="handleMore" v-if="value.length !== 0">
                  <Goods v-for="(item,index) in value" :key="index" :goods="item" :nameClick="false" shopShow :itemClick="handleGoDetail"/>
                </ShowContain>
            </template>
            <!-- <div class="main-left-pagination" v-if="selectedTab !== 0">
              <Pagination :pagination="pagination" :numChange="handlePaginate" :reload="reload"/>
            </div> -->
          </div>
          <!-- 判断当前是否有shop_id 用于搜索的 -->
          <div class="main-left" v-else-if="$route.query.shop_id">
              <!-- 当使用搜索框时展示的数据 -->
              <template v-for="(value,keys) in searchData">
                <ShowContain :title="keys" :key="keys"  v-if="value.length !== 0">
                  <Goods v-for="(item,index) in value" :key="index" :goods="item"/>
                </ShowContain>
                <ShowContain :title="keys" :key="keys" v-else >
                  <div class="none">暂无数据</div>
                </ShowContain>
              </template>
              <!-- <div class="main-left-pagination" v-if="selectedTab || showSearch || selectedTab === 0">
                <Pagination :pagination="pagination"/>
              </div> -->
          </div>
        </div>
        <!-- 自己的店 -->
        <div v-else>
          <div class="main-left" v-if="!showSearch && $route.query.shop_id">
            <!-- 普通的展示 -->
            <template v-for="(value,keys) in goodsDatas">
                <ShowContain :title="typesMap[keys]" :key="keys" :moreClick="handleMore" v-if="value.length !== 0">
                  <Goods v-for="(item,index) in value" :key="index" :goods="item" :nameClick="false" shopShow :itemClick="handleGoDetail"/>
                </ShowContain>
            </template>
            <!-- <div class="main-left-pagination" v-if="selectedTab !== 0">
              <Pagination :pagination="pagination" :numChange="handlePaginate" :reload="reload"/>
            </div> -->
          </div>
          <!-- 判断当前是否有shop_id 用于搜索的 -->
          <div class="main-left" v-else-if="$route.query.shop_id">
              <!-- 当使用搜索框时展示的数据 -->
              <template v-for="(value,keys) in searchData">
                <ShowContain :title="keys" :key="keys"  v-if="value.length !== 0">
                  <Goods v-for="(item,index) in value" :key="index" :goods="item"/>
                </ShowContain>
                <ShowContain :title="keys" :key="keys" v-else >
                  <div class="none">暂无数据</div>
                </ShowContain>
              </template>
              <!-- <div class="main-left-pagination" v-if="selectedTab || showSearch || selectedTab === 0">
                <Pagination :pagination="pagination"/>
              </div> -->
          </div>
          <!-- 如果没有实名认证 -->
          <div class="toRealAuth" v-else-if="!userInfo.user_realName">
            <ShowContain>
              <div class="seller">
                <div class="seller_top">
                  <i class="iconfont icon-grin-squint-tears" /> 
                  <span>您还没有实名认证,实名认证后方能成为卖家...</span>
                </div>
                <el-button type="primary" @click="()=>{handleAuthen(true)}"><i class="iconfont icon-add" />实名认证</el-button>
              </div>
            </ShowContain>
          </div>
          <!-- 实名认证后 成为卖家 -->
          <div class="toBeSeller" v-else-if="userInfo.user_realName && !userInfo.shop_id">
            <ShowContain>
              <div class="seller">
                <div class="seller_top">
                  <i class="iconfont icon-grin-squint-tears" /> 
                  <span>您已实名认证,现在申请成为卖家吧!</span>
                </div>
                <el-button type="primary" @click="()=>{handleSeller(true)}"><i class="iconfont icon-add" />成为卖家</el-button>
              </div>
            </ShowContain>
          </div>
          <!-- 审批中 -->
          <div class="toBeSeller" v-else-if="userInfo.user_realName && userInfo.shop_id && userInfo.user_shop === 0">
            <ShowContain>
              <div class="seller">
                <div class="seller_top">
                  <i class="iconfont icon-grin-squint-tears" /> 
                  <span>您已申请成为卖家,等待管理员审批...</span>
                </div>
              </div>
            </ShowContain>
          </div>
        </div>
      </div>
      <!--啥也没有 --> 
      <!-- <div class="toBeSeller" :style="{width: '78%'}">
            <ShowContain>
              <div class="seller">
                <div class="seller_top">
                  <i class="iconfont icon-grin-squint-tears" /> 
                  <span>您的店铺啥都没有,快去添加宝贝吧!</span>
                </div>
              </div>
            </ShowContain>
      </div> -->
      <div class="main-right">
        <ShowContain :title="typesMap[keys]+'推荐'" v-for="(value,keys) in recommendDatas" :key="keys">
          <Goods v-for="(item,index) in value" :key="index" :goods="item" />
        </ShowContain>
      </div>
    </div>
    <add-modal />
    <realAuthenModal :visible="realVisible" @close="()=>{handleAuthen(false)}"/>
    <sellerModal :visible="sellVisible" @close="()=>{handleSeller(false)}"/>
  </div>
</template>

<script>


import IndexHeader from "@/components/IndexHeader/index";
import ShowContain from "@/components/ShowContain/index"
import addModal from './addModal/index';
import Goods from "@/components/Goods/index"
// import Pagination from '@/components/Pagination';
import { mapMutations, mapActions, mapState } from 'vuex';
import realAuthenModal from '../MyInfo/realAuthen/realAuthenModal'
import sellerModal from './sellerModal'

export default {
  components: {
    IndexHeader,
    ShowContain,
    Goods,
    addModal,
    // Pagination,
    realAuthenModal,
    sellerModal
  },
  computed: {
    ...mapState({
      goodsDatas: state => state.shop.goodsDatas,
      userInfo: state => state.user.userInfo,
      login: state => state.user.login,
      searchData: state => state.shop.searchData,
      pagination: state => state.shop.pagination,
      reload: state => state.shop.reload,
      shopDes: state => state.shop.shopDes,
      isCollect: state => state.collect.isCollect,
      recommendDatas: state => state.index.recommendDatas,
    }),
    noData(){
      const arr = [];
      Object.keys(this.goodsDatas).forEach(key => {
        if(this.goodsDatas[key].length === 0){
          arr.push(true);
        }else{
           arr.push(false);
        }
      });
      return arr.reduce((a,b)=>a&&b);
    }
  },
  created(){
    if(this.$route.query.shop_id){
      this.fetchShopGoods({ shop_id: this.$route.query.shop_id });
      this.fetchShopScore({ shop_id: this.$route.query.shop_id });
      this.fetchIsCollectShop({
        shop_id: this.$route.query.shop_id,
        user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id,
      })
    }
    console.log(this.noData,'noDatanoData')
  },
  data () {
    return {
      tabs: ['全部','模板', '组件', '图片', '图标', 'SDK'],
      currentTypes: '',
      typesMap: {               //给goodsDatas做映射而已
        template: '模板',
        component: '组件',
        pictrue: '图片',
        icon: '图标',
        sdk: 'SDK'
      },
      selectedTab: 0,
      showSearch: false,
      realVisible: false,
      sellVisible: false
    }

  },
  methods: {
    ...mapMutations({ handleVisible: 'saveVisible', reloadPagination: 'reloadPagination' }),
    ...mapActions(['fetchShopGoods', 'fetchShopGoodsByType','fetchCollectAddShop','fetchSearchGoodsInShop','fetchShopScore','changeCollect','fetchIsCollectShop', 'fetchDeleteShop']),
    //Tabs选择触发的函数
    ...mapActions({
      fetchDetailById: 'user/fetchDetailById'
    }),
    handleChange (which,currentTypes) {
      this.currentTypes = `${currentTypes + 1}`;
      this.selectedTab = currentTypes;
      this.showSearch = false;
    },
    handleCollect () {
      if(!this.isCollect){
        this.fetchCollectAddShop({ user_id: this.userInfo.user_id, shop_id: this.$route.query.shop_id });
      }
    },
    handleMore (type) {
      let currentTypes = null;
      switch (type) {
        case '模板':
          currentTypes = 0;
          break;
        case '组件':
          currentTypes = 1;
          break;
        case '图片':
          currentTypes = 2;
          break;
        case '图标':
          currentTypes = 3;
          break;
        case 'SDK':
          currentTypes = 4;
          break;
        default: currentTypes = null;
      }
      this.handleChange(type, currentTypes);
      this.selectedTab = currentTypes+1; //除开一个'全部'
    },
    handleGoDetail(goods){
       this.$router.push({ 
         name: 'Detail', 
         query: { goods_id: goods.goods_id }, 
         params: { type: goods.type_name, isFromShop: true }
       })
    },
    handleSearch(content){
      if(!content.replace(' ','')){
        this.showSearch = false;
      }else{
        this.handleChange('');
        this.showSearch = true;
        this.fetchSearchGoodsInShop({ shop_id: this.userInfo.user_id, search_content: content });
      }
    },
    handlePaginate(num){
      this.fetchShopGoodsByType({ 
            shop_id: this.$route.query.shop_id, 
            type_id: Number(this.currentTypes-1),
            pageNum: num,
            pageSize: this.pagination.pageSize
      })
    },
    handleAuthen(realVisible){
      this.realVisible = realVisible;
    },
    handleSeller(sellVisible){
      this.sellVisible = sellVisible;
    },
    handleMoveCollect(){
      this.fetchDeleteShop({
        user_id: this.userInfo.user_id,
        shop_idList: [ this.$route.query.shop_id ]
      });
    }
  },
  watch: {
    currentTypes(nV,oV) {
      const type_id = Number(nV-1);
      if(!this.showSearch){
        if(type_id === 0){
          this.fetchShopGoods({ shop_id: this.$route.query.shop_id })
        }else{
          this.reloadPagination(false);
          this.fetchShopGoodsByType({ 
            shop_id: this.$route.query.shop_id, 
            type_id,
            pageNum: 1,
            pageSize: this.pagination.pageSize
          });
        }
      }
    },
    // userInfo: {
    //   handler(newV){
    //     console.log(newV,'userInfo')
    //   },
    //   deep: true
    // }
  },

}
</script>


<style lang="scss" src="./index.scss" scoped/>